import React from 'react'
import './index.css'
import Login from '../Login'
import { Grid,WingBlank,Modal } from 'antd-mobile'
import { Link } from 'react-router-dom';
import { isAuth,getToken,removeToken } from '../../utils/auth';
import API from '../../utils'

const menus = [
    {id: 1, name: '我的收藏', iconfont: 'icon-coll',to:'/favorate'},
    {id: 2, name: '我的出租', iconfont: 'icon-ind',to:'/rent'},
    {id: 3, name: '看房记录', iconfont: 'icon-record'},
    {
        id: 4,
        name: '成为房主',
        iconfont: 'icon-identity'
    },
    { id: 5, name: '个人资料', iconfont: 'icon-myinfo' },
    { id: 6, name: '联系我们', iconfont: 'icon-cust' },
]
const alert = Modal.alert;

export default class profile extends React.Component {
    state = {
        isLogin: isAuth(),
        userInfo: {
            avatar: '',
            nickname: ''
        }
    }

    componentDidMount() {
        this.getUserInfo()
    }

    async getUserInfo() {
        if(!this.state.isLogin) {
            return 
        }   
        // 获取个人资料
        const res = await API.get('/user',{
            headers: {
                authorization: getToken()
            }
        })
        if(res.data.status === 200) {
            const {avatar,nickname} = res.data.body
            this.setState({
                userInfo: {
                    avatar,
                    nickname
                }
            })
        }
    }

    grid = () =>{
        return (
            <div>
                <Grid 
                className="grid" 
                data={menus} 
                columnNum={3} 
                hasLine={false}
                renderItem = { item => 
                    item.to ? (
                        <Link to={item.to}>
                            <div className="menuItem">
                                <i className={`iconfont ${item.iconfont}`}/>
                                <span>{item.name}</span>
                            </div>
                        </Link>
                    ) : (
                        <div className="menuItem">
                            <i className={`iconfont ${item.iconfont}`}/>
                            <span>{item.name}</span>
                        </div>
                    )
                }
                />
            </div>
        )
    }

    logout = () =>{
        alert('提示', '是否确定退出', [
            { text: '取消' },
            { text: '退出', onPress: async () => {
                // 调用退出接口
                // await API.post('/user/logout',null,{
                //     headers:{
                //         authorization: getToken()
                //     }
                // })
                // removeToken('rentHouse_token')
                console.log('退出');
                this.setState({
                    isLogin:false
                })
                this.props.history.push('/login')
            }},
        ])
    }
    render(){
        const { history } = this.props
        const { isLogin,userInfo:{avatar,nickname} } = this.state

        return (
            <div>
                {
                    isLogin 
                    ? <Login/>
                    : <div className="profile">
                    <div className="profileBg">
                        <div className="loginBox">
                            <div className="avatar">
                                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimagev2.xmcdn.com%2Fgroup48%2FM08%2F5F%2FB3%2FwKgKlVtfGzLDNCWiAABj7GVMsPU049.jpg%21op_type%3D5%26upload_type%3Dalbum%26device_type%3Dios%26name%3Dmobile_large%26strip%3D1%26quality%3D7&refer=http%3A%2F%2Fimagev2.xmcdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630479060&t=3be1f5defa17ab3dda92324a36b799f9" />
                            </div>
                            <div className="identity">奇奇_13264900530</div>
                            <button onClick={this.logout}>退出</button>
                        </div>
                    </div>

                    <WingBlank>
                        {this.grid()}
                    </WingBlank>
                    
                    <div className="advert">
                        <img src="https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1977102131.jpg"/>
                        <div>广告</div>
                    </div>
                </div>
                }    
            </div>
        )
    }
}